<template>
  <load v-if="this.$store.state.isLoad"></load>
  <div class="detail" v-else-if="!this.$store.state.isLoad">
    <van-nav-bar
      title="漫画详情"
      left-arrow
      @click-left="onClickLeft"
      right-text="回到主页"
      @click-right="goRecommend"
    />
    <div class="imgBox">
      <img
        :src="'https://images.weserv.nl/?url=' + listData.horizontal_cover"
      />
      <div class="c-text">
        <div class="title">{{ listData.title }}</div>
        <div class="author">
          <span v-for="(item, index) in listData.author_name" :key="index"
            >{{ item }}丶</span
          >
          <span v-for="(item, idx) in listData.styles" :key="'0' + idx"
            >{{ item }} ·
          </span>
          <span>MC{{ this.$route.query.id }}</span>
        </div>
      </div>
    </div>
    <div class="twoBtn">
      <div class="left-btn" @click="getCollection">
        <span class="icon">
          <img
            :src="
              isCollection
                ? ''
                : ''
            "
          />
        </span>
        <span class="text">{{ isCollection ? "已追" : "追漫" }}</span>
      </div>
      <div class="right-btn" v-if="chapter[0]">
        <div
          class="look"
          v-if="comicData.short_title ? isN : isY"
          @click="
            read(
              chapter[0].id,
              bookId,
              chapter[0].short_title,
              chapter[0].is_locked,
              index
            )
          "
        >
          看 {{ chapter[0].short_title }}
        </div>
        <div
          class="look"
          v-if="comicData.short_title ? isY : isN"
          @click="
            read(
              comicData.comicId,
              comicData.bookId,
              comicData.short_title,
              comicData.vip,
              comicData.index
            )
          "
        >
          看 {{ comicData.short_title }}
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">连载中</div>
      <div class="content-text">
        <span
          class="synopsis"
          :class="isShow ? 'van-multi-ellipsis--l2' : ''"
          >{{ listData.evaluate }}</span
        >
        <span class="synopsis-icon" @click="getShow()"
          ><van-icon :name="isShow ? 'arrow-down' : 'arrow-up'"
        /></span>
      </div>
    </div>
    <div class="chapter">
      <div class="chapter-title">
        <div class="left">全部章节({{ listData.total }})</div>
        <div class="right" @click="up">
          {{ isUp ? "升序" : "降序" }}
          <span class="right-icon">
            <img :src="isUp ? upImg : downImg" />
          </span>
        </div>
      </div>
      <div class="listBox">
        <div
          class="par"
          v-for="(item, index) in chapter"
          :key="index"
          v-if="isCreate ? index < 7 : true"
          @click="
            read(item.id, bookId, item.short_title, item.is_locked, index)
          "
        >
          {{ item.short_title }}
          <div v-if="item.is_locked" class="locked"></div>
        </div>
        <div class="par" @click="create">...</div>
      </div>
      <div class="discuss">
        <div class="discuss-title">讨论区({{ count }})</div>
        <div class="user">
          <ul>
            <li class="user-box" v-for="(item, index) in userList" :key="index">
              <div class="user-info">
                <div class="avatar">
                  <img
                    :src="'https://images.weserv.nl/?url=' + item.member.avatar"
                  />
                </div>
                <div class="userName">
                  <div class="name">{{ item.member.uname }}</div>
                  <div class="data">{{ item.reply_control.time_desc }}</div>
                </div>
              </div>
              <div class="user-text">
                {{ item.content.message }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="like">
      <div class="like-title">猜你喜欢</div>
      <div class="like-item">
        <div
          v-for="(item, index) in likeData"
          :key="index"
          @click="goDetail(item.season_id)"
        >
          <classifyCartoon
            v-if="item"
            :img="item.vertical_cover"
            :title="item.title"
            :text="
              item.last_ord == item.total
                ? '[完结]共 ' + item.total + ' 话'
                : '更新至 ' + item.last_short_title + ' 话'
            "
          >
          </classifyCartoon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import load from "../components/Load.vue";
import classifyCartoon from "../components/ClassifyCartoon.vue";
export default {
  name: "Detail",
  data() {
    return {
      isShow: true,
      isCreate: true,
      listData: [],
      chapter: [],
      userList: [],
      isUp: true,
      upImg: require("../static/images/up.svg"),
      downImg: require("../static/images/down.svg"),
      count: "",
      likeData: [],
      bookId: this.$route.query.id,
      index: 0,
      isCollection: false,
      comicData: [],
      isY: true,
      isN: false,
    };
  },
  components: {
    classifyCartoon,
    load,
  },
  created() {
    //  请求详情页漫画的数据
    // this.isCollection = true
    this.axios({
      method: "get",
      url: "/ComicDetail",
      params: {
        comic_id: this.$route.query.id,
      },
    })
      .then((res) => {
        // console.log("res==>", res);
        if (res) {
          this.listData = res.data.data;
          this.chapter = this.listData.ep_list;
          this.chapter.reverse();
        }
        // console.log("this.chapter ==>", this.chapter);
        // console.log("this.listData==>", this.listData);
      })
      .catch((err) => {
        console.log("err==>", err);
      });

    //请求热门评论
    this.axios({
      method: "get",
      url: "reply",
      params: {
        oid: this.$route.query.id,
      },
    })
      .then((res1) => {
        // console.log("res1==>", res1);
        this.userList = res1.data.data.replies;
        this.count = res1.data.data.page.count;
        // console.log("this.userList==>", this.userList);
      })
      .catch((err1) => {
        console.log("err1==>", err1);
      });
    //请求猜你喜欢数据
    this.axios({
      method: "get",
      url: "Recommend",
      params: {
        comic_id: this.$route.query.id,
      },
    })
      .then((res2) => {
        // console.log('res2==>',res2);
        this.likeData = res2.data.data;
        // console.log("this.likeData==>", this.likeData);
      })
      .catch((err2) => {
        console.log("err2==>", err2);
      });
    this.getStart();
  },
  methods: {
    goRecommend() {
      this.$router.push({
        name: "Recommend",
      });
    },
    getCollection() {
      // let bookId = [];
      this.isCollection = !this.isCollection;
      let userData = localStorage.getItem("user");
      if (userData) {
        userData = JSON.parse(userData);
      } else {
        userData = [];
      }
      let user = sessionStorage.getItem("user");
      if (user) {
        user = JSON.parse(user);
      } else {
        user = [];
      }
      let detailArr = {
        bookId: this.$route.query.id,
        bookImg: this.listData.horizontal_cover,
        bookName: this.listData.title,
      };
      for (let i = 0; i < userData.length; i++) {
        if (userData[i].phone === user.phone) {
          if (this.isCollection) {
            userData[i].book.push(detailArr);
          } else {
            let index = userData[i].book.findIndex(
              (item) => item.bookId == this.$route.query.id
            );
            userData[i].book.splice(index, 1);
          }
        }
        // break;
      }
      // console.log(userData);
      localStorage.setItem("user", JSON.stringify(userData));
    },
    getStart() {
      let userData = localStorage.getItem("user");
      if (userData) {
        userData = JSON.parse(userData);
      } else {
        userData = [];
      }
      let user = sessionStorage.getItem("user");
      if (user) {
        user = JSON.parse(user);
      } else {
        user = [];
      }
      for (let i = 0; i < userData.length; i++) {
        if (userData[i].phone === user.phone) {
          if (userData[i].book) {
            if (userData[i].book.length <= 0) {
              return;
            }
            for (let j = 0; j < userData[i].book.length; j++) {
              if (userData[i].book[j].bookId == this.$route.query.id) {
                this.isCollection = true;
                this.comicData = userData[i].book[j];
                // console.log("this.comicData==>", this.comicData);
              }
            }
          }
        }
        // break;
      }
    },
    onClickLeft() {
      this.$router.back();
    },
    getShow() {
      this.isShow = !this.isShow;
    },
    create() {
      this.isCreate = !this.isCreate;
    },
    up() {
      this.isUp = !this.isUp;
      this.chapter.reverse();
      this.index = this.chapter - 1;
    },
    read(id, bookId, short_title, vip, index) {
      if (vip) {
        this.$router.push({
          name: "Vip",
        });
      } else {
        this.$router.push({
          name: "Read",
          query: {
            bookId: bookId,
            short_title: short_title,
            id: id,
            index: index,
            length: this.listData.ep_list.length,
            vip: vip,
          },
        });
      }
    },

    goDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id: id,
        },
      });
    },
  },
  watch: {
    $route() {
      this.$route.query.id;
      //  请求详情页漫画的数据
      this.axios({
        method: "get",
        url: "/ComicDetail",
        params: {
          comic_id: this.$route.query.id,
        },
      })
        .then((res) => {
          // console.log("res==>", res);
          if (res) {
            this.listData = res.data.data;
            this.chapter = this.listData.ep_list;
            this.chapter.reverse();
          }
          // console.log("this.chapter ==>", this.chapter);
          // console.log("this.listData==>", this.listData);
        })
        .catch((err) => {
          console.log("err==>", err);
        });

      //请求热门评论
      this.axios({
        method: "get",
        url: "reply",
        params: {
          oid: this.$route.query.id,
        },
      })
        .then((res1) => {
          // console.log("res1==>", res1);
          this.userList = res1.data.data.replies;
          this.count = res1.data.data.page.count;
          // console.log("this.userList==>", this.userList);
        })
        .catch((err1) => {
          console.log("err1==>", err1);
        });
      //请求猜你喜欢数据
      this.axios({
        method: "get",
        url: "Recommend",
        params: {
          comic_id: this.$route.query.id,
        },
      })
        .then((res2) => {
          // console.log('res2==>',res2);
          this.likeData = res2.data.data;
          // console.log("this.likeData==>", this.likeData);
        })
        .catch((err2) => {
          console.log("err2==>", err2);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  ::v-deep .van-nav-bar__right {
    font-size: 12px;
    // color: #fb7299;
  }
  .imgBox {
    width: 100%;
    height: 211px;
    // background-color: red;
    position: relative;
    img {
      width: 100%;
    }
    .c-text {
      position: absolute;
      bottom: 8px;
      left: 20px;
      .title {
        font-size: 20px;
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }
      .author {
        margin-top: 10px;
        font-size: 12px;
        color: hsla(0, 0%, 100%, 0.9);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }
    }
  }
  .twoBtn {
    width: 343px;
    height: 44px;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    // background-color: blue;
    .left-btn {
      width: 80px;
      height: 44px;
      display: flex;
      align-items: center;
      .icon {
        width: 32px;
        height: 32px;
        display: block;
        // background-image: url();
      }
      .text {
        font-size: 18px;
        color: #212121;
      }
    }
    .right-btn {
      width: 210px;
      height: 44px;
      background-color: #fb7299;
      border-radius: 40px;
      .look {
        text-align: center;
        line-height: 44px;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
  .content {
    width: 343px;
    margin: 15px auto;
    .title {
      font-size: 16px;
      color: #000000;
    }
    .content-text {
      display: flex;
      .synopsis {
        max-width: 95%;
        font-size: 12px;
        color: #999999;
        margin-top: 10px;
        overflow: hidden;
      }
      .synopsis-icon {
        width: 16px;
        height: 16px;
        // background-color: red;
        text-align: center;
        display: inline-block;
        margin-top: 25px;
      }
    }
  }
  .chapter {
    width: 343px;
    margin: 10px auto;
    .chapter-title {
      display: flex;
      justify-content: space-between;
      .left {
        height: 21px;
        font-size: 16px;
        color: #212121;
      }
      .right {
        width: 40px;
        height: 17.75px;
        font-size: 12px;
        color: #505050;
        display: flex;
        .right-icon {
          width: 16px;
          height: 16px;
          display: inline-block;
          img {
            width: 100%;
          }
        }
      }
    }
    .listBox {
      // margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      .par {
        margin-left: 5px;
        margin-top: 10px;
        border-radius: 3px;
        width: 79.75px;
        height: 38px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 38px;
        font-size: 14px;
        color: #212121;
        position: relative;
        .locked {
          position: absolute;
          top: 0;
          right: 0;
          width: 16px;
          height: 16px;
          display: inline-block;
          background-image: url();
          background-size: cover;
        }
      }
    }
  }
  .discuss {
    margin: 20px auto;
    width: 343px;
    height: 161px;
    .discuss-title {
      font-size: 16px;
      color: #000000;
    }
    .user {
      margin-top: 20px;
      height: 118px;
      ul {
        display: flex;
        overflow: auto;
        .user-box {
          width: 250px;
          height: 118px;
          border: 1px solid #ccc;
          margin-right: 10px;
          .user-box::-webkit-scrollbar {
            width: 0 !important;
          }
          .user-info {
            display: flex;
            padding-top: 15px;
            .avatar {
              width: 32px;
              height: 32px;
              border-radius: 32px;
              // background-color: red;
              margin-left: 10px;
              margin-right: 5px;
              img {
                width: 100%;
                border-radius: 32px;
              }
            }
            .userName {
              .name {
                font-size: 12px;
                color: #757575;
              }
              .data {
                font-size: 12px;
                color: #999999;
              }
            }
          }
          .user-text {
            width: 226px;
            height: 46.8px;
            // background-color: green;
            margin-top: 10px;
            margin-left: 10px;
            font-size: 12px;
            color: #000000;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            // max-width: 85%;
            text-align: justify;
          }
        }
      }
    }
  }
  .like {
    .like-title {
      width: 343px;
      // height: 20px;
      margin: 25px auto;
      font-size: 16px;
      color: #212121;
    }
    .like-item {
      width: 343px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
  }
}
</style>